<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol,
    li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 400px;
      border: 3px solid #333;
      margin: 50px auto;
      display: flex;
      flex-direction: column
    }

    .box>ul {
      height: 60px;
      display: flex;
    }

    .box>ul>li {
      flex: 1;
      background-color: skyblue;
      color: #fff;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .box>ul>li.active {
      background-color: orange;
    }

    .box>ol {
      flex: 1;
      position: relative;
    }

    .box>ol>li {
      width: 100%;
      height: 100%;
      background-color: purple;
      position: absolute;
      left: 0;
      top: 0;

      font-size: 100px;
      color: #fff;

      display: none;
    }

    .box>ol>li.active {
      display: block;
    }
  </style>
</head>

<body>

  <div class="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <!-- 需求 约定  
    ul下的li 是按钮  
    ol下的li 是盒子 

    点击按钮  让这个按钮  高亮  其它 按钮取消高亮
    点击按钮 让对应的内容区域显示 其它内容隐藏


    点击第0个按钮  让第0个盒子显示 
    点击第1个按钮  让第1个盒子显示 

    点击第2个按钮  让第2个盒子显示 


-->

  <script>
    // 我们要给三个按钮绑定点击事件 
    // 先找到三个按钮  


    //点击哪个按钮 让哪个按钮对应的内容显示 
    // 找到内容区域 

    // var btns = document.querySelectorAll('ul > li');

    // var boxes = document.querySelectorAll('ol > li');


    // btns.forEach(function(item,index){
    //     // item就是每个按钮 
    //     item.onclick = function(){
    //         // alert(index);

    //         // 从一个按钮切换到另外一个按钮
    //         // 让所有的按钮取消高亮 
    //         // 所有的盒子全部隐藏  
    //         // 需要再来一次遍历
    //         btns.forEach(function(item,index){
    //             // 按钮对应的盒子 显示 
    //             btns[index].classList.remove('active');
    //             boxes[index].classList.remove('active');
    //         });

    //         // 让哪个按钮高亮  让哪个盒子显示以前 我们要先移出所有的按钮高亮 
    //         // 隐藏所有的盒子   

    //         // 点击那个按钮让它高亮 
    //         // 按钮对应的盒子 显示 
    //         btns[index].classList.add('active');
    //         boxes[index].classList.add('active');

    //     }
    // });



    // for(var i=0;i<5;i++){
    //   console.log('');
    // }


    // console.log(i); 拿到的是循环结束以后的i 
    var btns = document.querySelectorAll('ul > li'); //所有的按钮 

    var boxes = document.querySelectorAll('ol > li'); // 所有的盒子 

    // 第1次循环  i=0  btns[0].dataset = 0;
    // 第2次循环  i=1  btns[1].dataset = 1;
    // 第3次循环  i=2  btns[2].dataset = 2;


    for (var i = 0; i < btns.length;i++) {
        // 每次循环  给每个按钮添加一个编号 
        btns[i].dataset.id = i;
        // btns[i] 是每个按钮  i是下标  
        btns[i].onclick = function(){
            // alert(i); // 一打开页面循环已经结束了 
            // 每次循环绑定点击事件 
            // 也就是一打开页面 循环结束 每个按钮都有了点击事件 
            // 我点击按钮 函数执行  
            // 函数拿到的是循环结束后的 i 
            // 循环结束后  i的值是3 
            // 所以三个按钮的i都是 3 
            for(var j=0;j<btns.length;j++){
              btns[j].classList.remove('active');
              boxes[j].classList.remove('active');
            }

            // this 点击哪个按钮  哪个按钮就是this  
            // alert(this.dataset.id);



            // 点击哪个 哪个按钮高亮 对应的内容显示 
            // 在这之前  为了保证只能有一个按钮高亮  一个盒子显示 
            // 先移出所有的高亮  
            // 隐藏所有的盒子 

            btns[this.dataset.id].classList.add('active');
            boxes[this.dataset.id].classList.add('active');

        }
    }

    /* 
      i 全局

      {
        i 全局的i 
      }


      {
        i  i 全局的i 
      }
    
      {
        i i 全局的i 
      }
    
    
    
    
    
    */


    /* 
      var  只有在函数中才有作用域 在 for  if while 都是全局的 
      for 可以设置起始值  可以指定步长   步长可以++ 也可以--  
      foreach 起始值 一定是 0  步长一定是1 只能每次+1 
    
    
    */

  </script>
</body>

</html>